<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">setItem</button>
    <button id="btn2">getItem</button>
    <button id="btn3">removeItem</button>
    <button id="btn4">clear</button>
    <script>
        /*
            同学们有没有发现很多网站的搜索框都会有一个记录历史的功能，你一点击搜索框，下面就会出现你曾经搜索过的内容。又或者说有些网站会自动把你曾经输入过的用户名放到输入框里，那么他们是怎么做到的呢？这节课我们就一起来学习一下，并且写一个类似的案例。
        */

        /*
            localStorage是一个本地存储对象，提供了四个常用的方法
                setItem(key,value): 向localStorage中存储一个信息。
                getItem(key): 从localStorage中获取一个信息
                removeItem(key): 从localStorage中删除一个信息
                clear(): 将localStorage中存储的所有信息都删除
        */

        document.getElementById('btn1').onclick = ()=>{
            localStorage.setItem('age',18)
             // 注意一个小问题，我们js规定了setItem是只能存储字符串的。那么当我们有对象类型的数据要存储的时候怎么办呢？很简单,利用JSON.stringfy()即可。
            localStorage.setItem('person',JSON.stringify({name:'hzj',age:18,sex:'男'}))
        }

        document.getElementById('btn2').onclick = ()=>{
            console.log(localStorage.getItem('age'));
            // 同样，我们可以利用JSON.parse()将已被转换为字符串的对象解析回来
            console.log(JSON.parse(localStorage.getItem('person')))
        }

        document.getElementById('btn3').onclick = ()=>{
            localStorage.removeItem('age')
        }

        document.getElementById('btn4').onclick = ()=>{
            localStorage.clear()
        }
    </script>
</body>
</html>